<template>
  <div>
    <div class="container" >
        <div class="line_box">
            <span
                class="line_item"
                v-for="(item,index) in lineList"
                :key="index"
                :style="{
                        '--c1':item.c1,
                        '--c2':item.c2,
                        '--l':item.l,
                        '--d':item.d,
                        '--r':item.r
                    }"
                ></span>
        </div>
    </div>
        <div class="wrap">
      <div class="line_box">
        <div class="line_item" />
      </div>
    </div>
  </div>
</template>

<script>
// 链接：https://juejin.cn/post/7166294509000376327
export default {
  name: 'FallingStar',
  data () {
    return {
      lineList: [
        {
          c1: '#69E4F6',
          c2: '#69e4f600',
          l: '10px',
          d: 3
        },
        {
          c1: '#FED258',
          c2: 'rgba(254,210,88,0)',
          l: '80px',
          d: 5
        },
        {
          c1: '#FED258',
          c2: 'rgba(254,210,88,0)',
          r: '92px',
          d: 2
        },
        {
          c1: '#69E4F6',
          c2: '#69e4f600',
          r: '50px',
          d: 0
        },
        {
          c1: '#69E4F6',
          c2: '#69e4f600',
          r: '41px',
          d: 1
        },
        {
          c1: '#69E4F6',
          c2: '#69e4f600',
          l: '105px',
          d: 4
        },
        {
          c1: '#FED258',
          c2: 'rgba(254,210,88,0)',
          l: '30px',
          d: 2
        },
        {
          c1: '#FED258',
          c2: 'rgba(254,210,88,0)',
          r: '111px',
          d: 5
        },
        {
          c1: '#69E4F6',
          c2: '#69e4f600',
          r: '2px',
          d: 3
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.container{
   box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
   border-radius: 20px;
   padding: 40px;
   position: relative;
   width: 700px;
   height: 520px;
   overflow: hidden;
 }
 .container::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: url('../../assets/earth.jpg') no-repeat;
   background-size: cover;
   animation: ping 4s infinite linear alternate-reverse;
 }
  @keyframes ping {
   100% {
     background-position: 100%;
   }
 }

 .line_box {
   width: 100%;
   height: 100%;
   position: relative;
 }

.line_item{
    width: 4px;
    height: 50px;
    background:linear-gradient(0deg,var(--c1) 0,var(--c2) 100%) ;
    position: absolute;
    top: 0;
    transform: rotate(45deg)  translateY(-180px);
    // left: var(--l);
    // right: var(--r);
    left: calc(var(--l) + 70px);
    right: calc(var(--r) - 70px);
    opacity: 0;
    animation: shank 2s linear infinite;
	animation-delay: calc(var(--d) * 0.2s);

    &::after{
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: var(--c1);
        filter: blur(2px);
        box-shadow: 0 -1px -1px 5px var(--c2);
        bottom: -4px;
        left: 50%;
        transform: translate(-50%);
    }
}

@keyframes shank {
  0% {
    transform: rotate(45deg) translateY(-100px) scale(0.5);
    opacity: 0;
  }

  70% {
    opacity: 1;
    transform: rotate(45deg) translateY(100px) scale(1.1);
  }

  100% {
    transform: rotate(45deg) translateY(220px) scale(0.5);
    opacity: 0;
  }
}

.wrap{
  width: 600px;
  height: 400px;
  background-color: #000;
  margin: 0 auto;

  .line_item{
    width: 4px;
    height: 80px;
    background: linear-gradient(0deg,orange 0 ,transparent 100%);
    position: relative;
    transform: rotate(45deg) translateY(40px);
    left: 60%;
    top: 0px;
    animation: star 0.8s linear infinite;
    &::after{
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: orange;
      filter: blur(2px);
    }
  }

  @keyframes star {
    0%{
      transform: rotate(45deg) translateY(90px) scale(0.8);
      opacity: 0;
    }
    50%{
      transform: rotate(45deg) translateY(180px) scale(1.2);
      opacity: 1;
    }
      100%{
      transform: rotate(45deg) translateY(270px) scale(0.8);
      opacity: 0;
    }
  }
}

</style>
